<template>
	<view class="content">
		<view class="f-c-b item">
			<view>用户头像</view>
			<view class="f-c-c item-img" @click="toChooseImg">
				<u-avatar :src="$u.baseUrl+vuex_user.img"></u-avatar>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<view class="f-c-b item">
			<view>用户昵称</view>
			<view @click="toEditName" v-show="nameFlag">{{vuex_user.name}}</view>
			<view class="inputName" v-show="!nameFlag">
				<input ref='inp' type="text" v-model="vuex_user.name" @blur="blur" />
			</view>
		</view>

		<view class="f-c-b item" @click="show=true">
			<view>地区</view>
			<view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>

		<u-picker @confirm="confirm" v-model="show" mode="region"></u-picker>
	</view>
</template>

<script>
	import uploadImg from '../../utils/uploadImg/index.js'
	export default {
		data() {
			return {
				show: false,
				nameFlag: true
			}
		},
		methods: {
			async toChooseImg() {
				/* 1. 上传图片，获得转换好的地址 */
				const res = await uploadImg(this.$u.api.fileUpLoad, 1)
				console.log(res);
				/* 2. 修改头像 */
				const { success, msg } = await this.$u.api.updateCImg({
					id: this.vuex_user.id,
					img: res[0]
				})
				if (!success) {
					this.$u.toast(msg)
					return
				}
				this.vuex_user.img = res[0]

			},
			toEditName() {
				this.nameFlag = false
				this.$refs.inp.focus = true
			},
			async blur() {
				const { success, msg } = await this.$u.api.updateCName({
					id: this.vuex_user.id,
					name: this.vuex_user.name
				}) 
				!success ? this.$u.toast(msg) : null
			},
			async confirm(e){
					const {data,success,msg} =await this.$u.api.updateCArae({
						id:this.vuex_user.id,
						area:e.province.label+'-'+e.city.label+'-'+e.area.label
					})
					console.log(e.province.label+'-'+e.city.label+'-'+e.area.label);
					console.log(success);
					this.vuex_user.area=e.province.label+'-'+e.city.label+'-'+e.area.label
			}
		},
	}
</script>

<style>
	.content {
		background-color: #F4F4F4;
		height: 100vh;
	}

	.item {
		background-color: #fff;
		margin: 2rpx;
		padding: 20rpx;
	}

	.item-img image {
		/* border-radius: 50%; */
	}

	.inputName {
		width: 200rpx;
		text-align: right;
	}

	.inputName input {
		font-size: 28rpx;
	}
</style>
